<template>
	<!-- 事物管理 -->
	<div>
		<div class="content">
			<el-form class="table" ref="form" :model="form" label-width="80px">
				<h2 style="margin: 0 0 20px 200px">事物管理</h2>
				<el-form-item label="常规事物">
					<el-input v-model="form.things" placeholder="请输入常规事物名称"></el-input>
				</el-form-item>
				<el-form-item label="责任人">
					<div class="border" style="height: 200px">
						<el-scrollbar style="height: 100%">
							<!-- 多选单选框 -->
							<!-- <el-checkbox
								style="margin-left: 5px; display: block"
								:indeterminate="isIndeterminate"
								v-model="checkAll"
								v-for="item of checkedBranch"
								:key="item.id"
								@change="handleCheckedAllChange"
							>
								{{ item.name }}
							</el-checkbox>
							<div style="margin: 15px 0">
								<el-checkbox-group
									class="check"
									v-model="checkedBranch"
									@change="handleCheckedBranchChange"
								>
									<el-checkbox v-for="(item,index) of renderList" :label="item.id" :key="index">
										{{ item.name }}
									</el-checkbox>
								</el-checkbox-group>
							</div> -->
							<el-tree
								:props="props"
								:load="loadNode"
								lazy
								accordion
								show-checkbox
								@check-change="handleCheckChange"
							></el-tree>
						</el-scrollbar>
					</div>
				</el-form-item>
				<el-form-item label="状态 ">
					<el-switch v-model="form.delivery" :active-value="1" :inactive-value="0"></el-switch>
				</el-form-item>
				<el-form-item>
					<el-button :plain="true" type="primary" @click="onSubmit">确定</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
import { thingsListDep, thingsListUser, thingsAdd } from '@/APIs/index/index'
// import { thingsListDep, thingsListUser } from '@/APIs/index/index'
export default {
	name: 'ThingsManagement',
	data() {
		return {
			form: {
				things: '',
				delivery: 0,
				type: [],
				resource: ''
			},
			checkAll: false,
			idList: [],
			nameList: [],
			checkedBranch: [],
			isIndeterminate: true,
			// 树形控件
			props: {
				label: 'name',
				children: [],
				isLeaf: 'leaf'
			},
			count: 1
		}
	},
	created() {
		// this.ThingsManagement()
	},
	mounted() {},
	methods: {
		// 节点选中状态发生变化时的回调
		handleCheckChange(data, checked, indeterminate) {
			// data: 传递给 data 属性的数组中该节点所对应的对象
			// checked: 节点本身是否被选中
			// indeterminate: 节点的子树中是否有被选中的节点
			console.log(data, checked, indeterminate)
			if (checked) {
				this.idList.push(data.FK_USER)
				this.nameList.push(data.TEACHER_XM)
			} else {
				this.idList.splice(data.FK_USER, 1)
				this.nameList.splice(data.TEACHER_XM, 1)
			}
			this.idList = this.idList.filter(item => item)
			this.nameList = this.nameList.filter(item => item)
			console.log(this.idList, this.nameList)
		},
		// 节点被点击时的回调
		handleNodeClick(data) {
			console.log(data)
		},
		async loadNode(node, resolve) {
			// 渲染一级
			const data = await thingsListDep({})
			// eslint-disable-next-line no-unused-vars
			const checkedBranch = {}
			for (let i = 0; i < data.data.length; i++) {
				this.checkedBranch.push({
					id: data.data[i].ORGANIZATION_PK,
					name: data.data[i].ORGANIZATION_NAME
				})
			}
			if (node.level === 0) {
				// 如果有一级
				return resolve(this.checkedBranch)
			}
			let data1 = []
			await thingsListUser({ depId: node.data.id }).then(res => {
				// console.log(res)
				data1 = res.data
			})
			data1.forEach(item => {
				item.id = item.FK_USER
				item.name = item.TEACHER_XM
				item.leaf = true
			})
			return resolve(data1)
		},
		// 点击确定按钮，发送请求
		async onSubmit() {
			this.$message({
				message: '添加成功！',
				type: 'success'
			})
			console.log(
				'点击确定',
				this.form.things,
				this.idList.toString(),
				this.form.delivery,
				this.nameList.toString()
			)
			const thingName = this.form.things
			const userId = this.idList.toString()
			const thingStatus = this.form.delivery
			const thingUsername = this.nameList.toString()
			// eslint-disable-next-line no-unused-vars
			const data = await thingsAdd({ thingName, userId, thingStatus, thingUsername })
			this.$router.push('/thingsManagementDetail')
			console.log(data)
		}
	}
}
</script>

<style lang="scss" scoped>
body .el-scrollbar__wrap {
	overflow-x: hidden;
}
.content {
	width: 1140px;
	background: #f4f4f5;
}
.table {
	margin-left: 600px;
}
.border {
	width: 400px;
	// margin-left: 10px;
	border: 1px solid skyblue;
}
.check {
	margin-left: 20px;
}
</style>